Dashboard.addWidget({
    
    getId : function(){
        return 'image-map-widget';
    },
    
    getName : function(){
        return 'Image Map';
    },
    
    getDescription : function(){
        return {
            en : 'Widget that display a set of KPIs or Goals over an image',
            de : 'Widget that display a set of KPIs or Goals over an image'
        };
    },
    
    getIconClass : function(){
        return 'glyphicon glyphicon-picture';
    },
    
    createContent : function(configuration, currentWidgetInstanceId){
        
        var _createCircleCode = function(color){
            return'<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="10" fill="'+color+'" stroke="'+color+'" stroke-opacity="0.4" stroke-width="2"/></svg>';
        }
        var _formatGoalStatusAsTrafficLightCode = function(status){
            if(status == null)
                return _createCircleCode('lightgrey')+' '+_createCircleCode('lightgrey')+' '+_createCircleCode('lightgrey');
            return _createCircleCode(status>0?'green ':'lightgrey')+' '+_createCircleCode(status==0?'grey ':'lightgrey')+' '+_createCircleCode(status<0?'red ':'lightgrey');
        }
        var _formatKpiValue = function(value, measureUnit){
            if(value == null)
                value = '--';
            return '<div style="font-size:large;">' + value + ' ' + measureUnit + '</div>';
        };
        
        /*<div style="position:relative;overflow:auto;height:100vh;*/
        var ret = $('<div style="position:relative;">').append(
            $('<img src="'+configuration.image.url+'" style="position:absolute;image-orientation:from-image;top:0px;left:0px;width:'+configuration.image.width+'px;">').on('load', function(){
                $(this).parent().css('width',$(this).width()).css('height',$(this).height());
            })
        ).append(function(){
            var res = [];
            for(var i=0;i<configuration.kpis.kpiList.length;i++){
                var posX = configuration.kpis.kpiList[i].pos_x;
                var posY = configuration.kpis.kpiList[i].pos_y;
                var objectId = configuration.kpis.kpiList[i].id;
                var modelId = configuration.kpis.kpiList[i].modelId;
                
                var measure = null;
                var lastValue = null;
                var errorMsg = null;
                var objInfo = null;
                var valueToDisplay = '';
                try{
                    measure = Dashboard.evaluateKpi(currentWidgetInstanceId, modelId, objectId);
                    lastValue = measure.data.length>0 && measure.columns.length>0 ? measure.data[0][measure.columns[0]] : null;
                }catch(e){
                    errorMsg = e;
                }
                objInfo = ModelManager.getKpiInfo(modelId, objectId);
                
                valueToDisplay = _formatKpiValue(lastValue, (measure!=null && measure.columns.length>0)?objInfo.getFieldInfos(measure.columns[0]).measureUnit:'');
                var valueDivDom = $('<div><b>' + objInfo.name + ':</b><br>' + valueToDisplay + '</div>').popover({
                    placement : 'auto right',
                    container : 'body',
                    html : true,
                    title : objInfo.name + ' details',
                    content : function(){
                        var html = '<p>'+objInfo.description+'</p>';
                        
                        if(objInfo == null)
                            return html;
                        if(errorMsg != null){
                            html += '<p><b>Error Occurred: </b>'+errorMsg+'</p>';
                            return html;
                        }
                        if(measure==null)
                            throw 'Unexpected Exception!';
                        
                        html += '<table class="table table-condensed table-hover">';
                        html += '<tr>';
                        measure.columns.forEach(function(item){
                            html += '<th>'+item+'</th>';
                        });
                        html += '</tr>';
                        measure.data.forEach(function(dataItem, index){
                            if(index > 10)
                                return;
                            html += '<tr>';
                            measure.columns.forEach(function(columnName){
                                html += '<td>' + (dataItem[columnName]!=null?dataItem[columnName] + ' ' + objInfo.getFieldInfos(columnName).measureUnit :'')  + '</td>';
                            });
                            html += '</tr>';
                        });
                        if(measure.data.length > 10){
                            html += '<tr>';
                            measure.columns.forEach(function(item, i){
                                html += '<td>'+(i==0?'...':'')+'</td>';
                            });
                            html += '</tr>';
                        }
                        if(measure.data.length == 0){
                            html += '<tr>No information available</tr>';
                        }
                        html += '</table>';
                        html += '<p><b>More informations:</b></p>';
                        html += '<table class="table table-condensed table-hover">';
                        if(objInfo.type!=null)
                            html += '<tr><td><b>type</b></td><td>'+objInfo.type+'</td></tr>';
                        for(var moreInfoKey in measure.moreInfo)
                            html += '<tr><td><b>'+moreInfoKey+'</b></td><td>'+measure.moreInfo[moreInfoKey]+'</td></tr>';
                        if(Object.keys(measure.moreInfo).length==0 && objInfo.type==null)
                            html += '<tr><td>No additional infos available</td></tr>';
                        html += '</table>';
                        return html;
                    }(),
                    trigger : 'hover'
                });
                
                var divBorderColor = 'lightgrey';
                var targetRangeStatusDom = null;
                if(measure!=null && measure.targetRangeAlgorithmResult!=null){
                    var targetRangeStatus = measure.targetRangeAlgorithmResult.status;
                    divBorderColor = targetRangeStatus==null?'lightgrey':(targetRangeStatus>0?'green':(targetRangeStatus<0?'red':'grey'));
                    var targetRangeStatusHtml = _createCircleCode(targetRangeStatus==null?'lightgrey':(targetRangeStatus>0?'green':(targetRangeStatus<0?'red':'grey')));
                    targetRangeStatusDom = $('<div>').append($(targetRangeStatusHtml)).popover({
                        placement : 'auto left',
                        container : 'body',
                        html : true,
                        title : objInfo.name + ' target range status additional infos',
                        content : function(){
                            var html = '<table class="table table-condensed table-hover">';
                            for(var moreInfoKey in measure.targetRangeAlgorithmResult.moreInfo)
                                html += '<tr><td><b>'+moreInfoKey+'</b></td><td>'+measure.targetRangeAlgorithmResult.moreInfo[moreInfoKey]+'</td></tr>';
                            if(Object.keys(measure.targetRangeAlgorithmResult.moreInfo).length==0)
                                html += '<tr><td>No additional infos available</td></tr>';
                            html += '</table>';
                            return html;
                        }(),
                        trigger : 'hover'
                    });
                }
                
                var alertRangeStatusDomList = [];
                if(measure!=null)
                    for(var j=0;j<measure.alertRangeAlgorithmResultList.length;j++){
                        var alertCurrentResult = measure.alertRangeAlgorithmResultList[j];
                        var alertSuccessColor = 'green';
                        if(alertCurrentResult.widgetSpecificCustomization != null && alertCurrentResult.widgetSpecificCustomization.alertSuccessColor != null && alertCurrentResult.widgetSpecificCustomization.alertSuccessColor != '')
                            alertSuccessColor = alertCurrentResult.widgetSpecificCustomization.alertSuccessColor;
                        var alertCurrentStatus = alertCurrentResult.status;
                        divBorderColor = alertCurrentStatus>0 && divBorderColor!='red'?alertSuccessColor:divBorderColor;
                        var alertCurrentStatusHtml = _createCircleCode(alertCurrentStatus==null?'lightgrey':(alertCurrentStatus==0?'grey':(alertCurrentStatus<0?'lightgrey':alertSuccessColor)));
                        var alertCurrentStatusDom = $('<div>').append($(alertCurrentStatusHtml)).popover({
                            placement : 'auto left',
                            container : 'body',
                            html : true,
                            title : objInfo.name + ' alert range status additional infos',
                            content : function(){
                                var html = '<table class="table table-condensed table-hover">';
                                for(var moreInfoKey in alertCurrentResult.moreInfo)
                                    html += '<tr><td><b>'+moreInfoKey+'</b></td><td>'+alertCurrentResult.moreInfo[moreInfoKey]+'</td></tr>';
                                if(Object.keys(alertCurrentResult.moreInfo).length==0)
                                    html += '<tr><td>No additional infos available</td></tr>';
                                html += '</table>';
                                return html;
                            }(),
                            trigger : 'hover'
                        });
                        alertRangeStatusDomList.push(alertCurrentStatusDom);
                    }
                
                var kpiDivDom = $('<div class="imageMapBox" style="top:'+posY+'px;left:'+posX+'px;position:absolute;border-color:'+divBorderColor+';">').append(
                    valueDivDom
                ).append(
                    $('<div class="inline">').append(
                            targetRangeStatusDom
                    ).append(
                            alertRangeStatusDomList
                    )
                );
                
                res.push(kpiDivDom);
            }
            return res;
        }).append(function(){
            var res = [];
            for(var i=0;i<configuration.goals.goalList.length;i++){
                var posX = configuration.goals.goalList[i].pos_x;
                var posY = configuration.goals.goalList[i].pos_y;
                var objectId = configuration.goals.goalList[i].id;
                var modelId = configuration.goals.goalList[i].modelId;
                
                var measure = null;
                var lastValue = null;
                var errorMsg = null;
                var objInfo = null;
                var valueToDisplay = '';
                try{
                    measure = Dashboard.evaluateGoal(currentWidgetInstanceId, modelId, objectId);
                    lastValue = measure.status;
                }catch(e){
                    errorMsg = e;
                }
                objInfo = ModelManager.getGoalInfo(modelId, objectId);
                var divBorderColor = lastValue==null?'lightgrey':(lastValue>0?'green ':(lastValue<0?'red':'grey'));
                valueToDisplay = _formatGoalStatusAsTrafficLightCode(lastValue);
                var valueDivDom = $('<div><b>' + objInfo.name + ':</b><br>' + valueToDisplay + '</div>').popover({
                    placement : 'auto right',
                    container : 'body',
                    html : true,
                    title : objInfo.name + ' details',
                    content : function(){
                        var html = '<p>'+objInfo.description+'</p>';
                        
                        if(objInfo == null)
                            return html;
                        if(errorMsg != null){
                            html += '<p><b>Error Occurred: </b>'+errorMsg+'</p>';
                            return html;
                        }
                        if(measure==null)
                            throw 'Unexpected Exception!';
                        
                        html += '<table class="table table-condensed table-hover">';
                        html += '<tr><th>Details</th><th>Values</th></tr>';
                        html += '<tr><td>status</td><td>'+(measure.status==0?'UNKNOWN':(measure.status>0?'SUCCESS':'FAILURE'))+'</td></tr>';
                        if(objInfo.type!=null)
                            html += '<tr><td>type</td><td>'+objInfo.type+'</td></tr>';
                        for(var moreInfoKey in measure.moreInfo)
                            html += '<tr><td>'+moreInfoKey+'</td><td>'+measure.moreInfo[moreInfoKey]+'</td></tr>';
                        html += '</table>';
                        return html;
                    }(),
                    trigger : 'hover'
                });

                var goalDivDom = $('<div class="imageMapBox" style="top:'+posY+'px;left:'+posX+'px;position:absolute;border-color:'+divBorderColor+';">').append(
                    valueDivDom
                );
                res.push(goalDivDom);
            }
            return res;
        });
        
        return ret;
    },
    
    getConfiguration : function(){
        return {
            image : {
                description : {
                    en : '',
                    de : ''
                },
                value : 'custom',
                url : '',
                width : ''
            },
            kpis : {
                description : {
                    en : '',
                    de : ''
                },
                value : 'custom',
                kpiList : [{
                    modelId : '',
                    id : '',
                    pos_x : '',
                    pos_y : ''
                }]
            },
            goals : {
                description : {
                    en : '',
                    de : ''
                },
                value : 'custom',
                goalList : [{
                    modelId : '',
                    id : '',
                    pos_x : '',
                    pos_y : ''
                }]
            }
        };
    },
    
    createConfiguration : function(presetConfig){
        
        var node = $('<div class="container-fluid" style="width:60em;">').append(
            $('<div class="row">').append(
                $('<div class="col-xs-6 col-md-4">').append(
                    '<p><b>Click</b> on the image to add KPIs/Goals</p>'
                ).append(
                    $('<div id="iamgeMapTableScrollDiv" style="overflow-y:auto;height:30em;">').append(
                        $('<table class="table table-condensed table-hover">').append(
                            $('<tbody id="iamgeMapTable">')
                        )
                    )
                )
            ).append(
                $('<div class="col-xs-12 col-sm-6 col-md-8">').append(
                    $('<div class="btn-group" role="group">').append(
                        $('<label class="btn btn-default" title="Select the image to visualize"><span class="glyphicon glyphicon-open"></span><input type="file" accept="image/*" style="display: none;"></label>').change(function(e){
                            _readImageHandler(e.target.files[0]);
                        })
                    ).append(
                        $('<label class="btn btn-default" title="Zoom in"><span class="glyphicon glyphicon-zoom-in"></span></label>').click(function(){
                            _zoomImage(10);
                        })
                    ).append(
                        $('<label class="btn btn-default" title="Zoom out"><span class="glyphicon glyphicon-zoom-out"></span></label>').click(function(){
                            _zoomImage(-10);
                        })
                    )
                ).append(
                    $('<div id="imageMapDiv" class="dropZone" style="overflow:auto;height:30em;position:relative;">').append(
                        $('<img id="imageImg" src="" style="position:absolute;cursor:crosshair;image-orientation:from-image;top:0px;left:0px;">').click(function(e){
                            var offset = $(this).offset();
                            var x = e.pageX - offset.left;
                            var y = e.pageY - offset.top;
                            _addMappedElement(null, null, null, x, y);
                        }).on('load', function(){
                            node.find('#imageMapDiv').removeClass('dropZone');
                        })
                    ).on("drop", function(e) {
                        e.preventDefault();  
                        e.stopPropagation();
                        _readImageHandler(e.originalEvent.dataTransfer.files[0]);
                    }).on("dragover", function(e) {
                        e.preventDefault();  
                        e.stopPropagation();
                        $(this).addClass('dragging');
                    }).on("dragleave", function(e) {
                        e.preventDefault();  
                        e.stopPropagation();
                        $(this).removeClass('dragging');
                    })
                )
            )
        );
        
        var _readImageHandler = function(file){
            if(!file)
                return;
            if(!(window.File && window.FileReader && window.FileList && window.Blob)){
                alert('The File APIs are not fully supported in this browser.');
                return;
            }
            var reader = new FileReader();
            reader.onload = function(e) {
                var content = e.target.result;
                node.find('#imageImg').attr('src', content);
            };
            reader.readAsDataURL(file);
        };
        
        var mappedElements = {};
        
        var _zoomImage = function(percentage){
            var imageNode = node.find('#imageImg');
            var imageMapDivNode = node.find('#imageMapDiv');
            var oldWidth = imageNode.width();
            var oldHeight = imageNode.height();
            var currentZoom = (imageNode.width()/imageMapDivNode.width())*100;
            currentZoom += percentage;
            if(currentZoom<=0)
                currentZoom = 0;
            var newWidthPx = currentZoom*imageMapDivNode.width()/100;
            imageNode.css('width', newWidthPx+'px');
            
            var newWidth = imageNode.width();
            var newHeight = imageNode.height();
            
            for(var id in mappedElements){
                var newX = newWidth/oldWidth*mappedElements[id].posX;
                var newY = newHeight/oldHeight*mappedElements[id].posY;
                _moveMappedElement(id, newX, newY);
            }
        };
        
        var _addMappedElement = function(modelId, isGoal, objectId, posX, posY){
            var uuid = 'imgMappedEl_'+Utils.generateUUID();
            node.find('#imageMapDiv').append(
                $('<div id="'+uuid+'_div" style="top:'+posY+'px;left:'+posX+'px;width:30px;height:30px;position:absolute;border:5px solid #428bca;background-color:red;">').hover(function(){
                    if(mappedElements[uuid].modelId != null && mappedElements[uuid].isGoal != null && mappedElements[uuid].objectId != null)
                        node.find('#'+uuid+'_tr').toggleClass('success');
                    else
                        node.find('#'+uuid+'_tr').toggleClass('danger');
                    
                    node.find('#iamgeMapTableScrollDiv').animate({scrollTop:node.find('#'+uuid+'_tr').position().top}, 300);
                })
            );
            node.find('#iamgeMapTable').append(
                $('<tr id="'+uuid+'_tr" class="danger">').append(
                    $('<td class="input-group">').append(
                        $('<select class="form-control" id="'+uuid+'_model_select">').append(function(){
                            var modelSelectArray = ['<option value="">--Select a Model--</option>'];
                            ModelManager.getKpiModelList().forEach(function(item){
                                modelSelectArray.push('<option value="' + item.id + '">' + item.name + '</option>');
                            }, this);
                            return modelSelectArray;
                        }.call()).change(function(){
                            var modelId = $(this).val();
                            var modelName = $(this).find('option:selected').text();
                            var kpiGoalSelect = node.find('#'+uuid+'_kpi_goal_select');
                            kpiGoalSelect.empty();
                            if(modelId==''){
                                kpiGoalSelect.append('<option value="">--First select a Model--</option>');
                            }else{
                                kpiGoalSelect.append('<option value="">--KPI List--</option>');
                                ModelManager.getKpiList(modelId).forEach(function(item){
                                    kpiGoalSelect.append('<option value="k_' + item.id + '">' + item.name + '</option>');
                                });
                                kpiGoalSelect.append('<option value="">--Goal List--</option>');
                                ModelManager.getGoalList(modelId).forEach(function(item){
                                    kpiGoalSelect.append('<option value="g_' + item.id + '">' + item.name + '</option>');
                                });
                                
                                mappedElements[uuid].modelId = modelId;
                            }
                            node.find('#'+uuid+'_div').css('background-color', 'red');
                            node.find('#'+uuid+'_tr').removeClass('success').addClass('danger');
                        })
                    ).append(
                        $('<select class="form-control" id="'+uuid+'_kpi_goal_select">').append([
                            '<option value="">--First select a Model--</option>'
                        ]).change(function(){
                            var selectedVal = $(this).val();
                            var isGoal = null;
                            var objectId = null;
                            if(selectedVal!=''){
                                isGoal = selectedVal.startsWith('g_');
                                objectId = selectedVal.substr(2);
                            }
                            mappedElements[uuid].isGoal = isGoal;
                            mappedElements[uuid].objectId = objectId;
                            if(isGoal!=null && objectId!=null){
                                node.find('#'+uuid+'_div').css('background-color', 'GreenYellow');
                                node.find('#'+uuid+'_tr').addClass('success').removeClass('danger');
                            }else{
                                node.find('#'+uuid+'_div').css('background-color', 'red');
                                node.find('#'+uuid+'_tr').removeClass('success').addClass('danger');
                            }
                        })
                    ).append(
                        $('<div class="input-group-addon link" style="font-size:21px;font-weight:700;">&times;</div>').click(function(){
                            delete mappedElements[uuid];
                            node.find('#'+uuid+'_div').remove();
                            node.find('#'+uuid+'_tr').remove();
                        })
                    )
                ).hover(function(){
                    var scrollLeftVal = mappedElements[uuid].posX-(node.find('#imageMapDiv').width()/2);
                    var scrollTopVal = mappedElements[uuid].posY-(node.find('#imageMapDiv').height()/2);
                    node.find('#imageMapDiv').animate({scrollTop:scrollTopVal, scrollLeft:scrollLeftVal}, 300);
                    node.find('#'+uuid+'_div').fadeTo(100, 0.1, function(){$(this).fadeTo(500, 1.0, function(){$(this).fadeTo(100, 0.1, function(){$(this).fadeTo(500, 1.0)})})});
                }, function(){})
            );
            
            mappedElements[uuid] = {
                modelId : modelId,
                isGoal : isGoal,
                objectId : objectId,
                posX : posX,
                posY: posY
            };
            
            if(modelId != null)
                node.find('#'+uuid+'_model_select').val(modelId).change();
            if(modelId != null && isGoal != null && objectId != null)
                node.find('#'+uuid+'_kpi_goal_select').val((isGoal?'g_':'k_')+objectId).change();
        };
        
        var _moveMappedElement = function(id, newX, newY){
            mappedElements[id].posX = newX;
            mappedElements[id].posY = newY;
            node.find('#'+id+'_div').css('top', newY+'px').css('left', newX+'px');
        };
        
        if(presetConfig != null){
            node.find('#imageImg').attr('src', presetConfig.image.url);
            node.find('#imageImg').css('width', presetConfig.image.width+'px');
            if(presetConfig.kpis.kpiList!=null)
                for(var i=0;i<presetConfig.kpis.kpiList.length;i++)
                    _addMappedElement(presetConfig.kpis.kpiList[i].modelId, false, presetConfig.kpis.kpiList[i].id, presetConfig.kpis.kpiList[i].pos_x, presetConfig.kpis.kpiList[i].pos_y);
            if(presetConfig.goals.goalList!=null)
                for(var i=0;i<presetConfig.goals.goalList.length;i++)
                    _addMappedElement(presetConfig.goals.goalList[i].modelId, true, presetConfig.goals.goalList[i].id, presetConfig.goals.goalList[i].pos_x, presetConfig.goals.goalList[i].pos_y);
        }
        
        var okHandler = function(){
            
            for(var key in mappedElements)
                if(mappedElements[key].isGoal==null)
                    throw 'Some kpi or goals over the image are not configured properly';
            
            return {
                image : {
                    value : 'custom',
                    url : node.find('#imageImg').attr('src'),
                    width : node.find('#imageImg').width()
                },
                kpis : {
                    value : 'custom',
                    kpiList : function(){
                        var ret = [];
                        for(var key in mappedElements)
                            if(mappedElements[key].isGoal===false)
                                ret.push({
                                    modelId : mappedElements[key].modelId,
                                    id : mappedElements[key].objectId,
                                    pos_x : mappedElements[key].posX,
                                    pos_y : mappedElements[key].posY
                                });
                        return ret;
                    }.call()
                },
                goals : {
                    value : 'custom',
                    goalList : function(){
                        var ret = [];
                        for(var key in mappedElements)
                            if(mappedElements[key].isGoal===true)
                                ret.push({
                                    modelId : mappedElements[key].modelId,
                                    id : mappedElements[key].objectId,
                                    pos_x : mappedElements[key].posX,
                                    pos_y : mappedElements[key].posY
                                });
                        return ret;
                    }.call()
                }
            }
        }; 
        
        return {
            nodeElement : node,
            okHandler : okHandler
        };
    },
    
    getPreferredSize : function(){
        return {w:5, h:5};
    }
});